<template>
  <div>
    <form @submit.prevent="onLogin" class="jx-con-wrap">
      <div class="vux-demo">
        <img class="logo" src="../../assets/vux_logo.png">
      </div>
      <group class="login">
        <x-input type="number" is-type="china-mobile" placeholder="输入手机号" :min="11" :max="11"
                 v-model="model.username"></x-input>
        <x-input type="password" placeholder="输入密码(6位以上)" v-model="model.password"></x-input>
      </group>
      <div class="submit">
        <x-button>登录</x-button>
      </div>
      <router-link to="forget" class="jx-forget">忘记密码</router-link>
    </form>
  </div>
</template>

<script>
  import {Group, Cell, XInput, XButton} from 'vux';

  import {mapActions, mapState} from 'vuex';
  import * as types from '../../store/types'
  export default {
    components: {
      Group,
      Cell,
      XInput,
      XButton,
    },
    data() {
      return {
        model: {
          username: '',
          password: ''
        },
      };
    },
    methods: {
      ...mapActions([
        'login',
      ]),
      onLogin(){
        let fromPath = this.$route.query.from;
        let _this = this;
        this.login(this.model).then((userInfo) => {
          fromPath = fromPath || '/'
          _this.$router.replace(fromPath)
        }).catch(err => {
          console.warn('登录失败：', err)
        })
      },
      onRegister(){
        this.$router.replace('/register')
      }
    },
    created() {
      let header = Object.assign({}, this.$store.getters.header, {
        title: '登录',
        isRightTxt: true,
        rightTxt: '注册',
        rightEvent: this.onRegister
      })
      this.$store.commit(types.UPDATE_HEADER, header)
    }
  };
</script>

<style>
  .vux-demo {
    text-align: center;
  }

  .logo {
    width: 100px;
    height: 100px
  }

  .jx-con-wrap {
    overflow: auto;
  }

  .login {
    width: 94%;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
  }

  .submit {
    color: #179de9;
    background-color: #fff;
    width: 94%;
    margin: 10px auto;
    display: block;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
  }

  .jx-forget {
    font-size: 14px;
  / / color: #fff;
    display: inline-block;
    margin: 30px auto 0;
    text-decoration: underline;
    position: relative;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
</style>
